import { useLocation, useRoutes } from "react-router-dom";
import { createElement ,lazy,Suspense,memo} from "react";
import { Navigate } from "react-router-dom";
import SecurityLayout from "@/layouts/SecurityLayout";
import UserLayoutRoutes from "@/layouts/UserLayout/routes";
import UserLayout from '@/layouts/UserLayout';
import { redirect } from "react-router-dom";
import UniversalLayoutRoutes from "../layouts/UniversalLayout/routes";
import UniversalLayout from '@/layouts/UniversalLayout';
import PageLoading from '@/components/PageLoading';
import {pathKeyCreateUseRoutes} from "@/utils/router"
export const isExternal = (path) => /^(https?:|mailto:|tel:)/.test(path);
export const SuspenseLazy = memo(({ children }) => (
	<Suspense fallback={<PageLoading />}>{children}</Suspense>
));

const createUseRoutes = (configRoutes, parentPath = "/") => {
	const routes = [];
	for (let index = 0; index < configRoutes.length; index++) {
		const item = configRoutes[index];
		if (isExternal(item.path)) {
			// eslint-disable-next-line no-continue
			continue;
		}
		const routesItem = {};

		// path
		routesItem.path = item.path.startsWith("/")
			? item.path
			: `${parentPath.endsWith("/") ? parentPath : `${parentPath}/`}${
					item.path
			  }`;
		// element
		if (item.component) {
			routesItem.element = createElement(item.component);
		}
		if (item.element) {
			routesItem.element = item.element;
		}
		// children
		const children = [];
		if (item.redirect) {
			children.push({
				path: routesItem.path,
				element: createElement(Navigate, { to: item.redirect }),
			});
		}
		if (item.children) {
			children.push(...createUseRoutes(item.children, routesItem.path));
		}
		if (children.length > 0) {
			routesItem.children = children;
		}

		// newItem push
		routes.push(routesItem);
	}

	return routes;
};

const routes = createUseRoutes([
	// {
	// 	path: "/",
	// 	redirect: "/",
	// 	children: [
	// 		{
	// 			path: "a",
	// 			element: (
	// 				<SecurityLayout>
	// 					<div>a</div>
	// 				</SecurityLayout>
	// 			),
	// 		},
	// 		{
	// 			path: "b",
	// 			element: <div>b</div>,
	// 		},
	// 	],
	// },
	{
		path: "/",
		redirect: "/home",
		children:UniversalLayoutRoutes
	},
	{
		path: "/user",
		redirect: "/user/login",
		children: UserLayoutRoutes,
	},
	{
		path: '*',
		component: lazy(() => import('@/pages/404')),
	}
]);
console.log(`routes:`, routes);

const layoutToRoutes = {
	UniversalLayout: pathKeyCreateUseRoutes([routes[0]]),
	UserLayout: pathKeyCreateUseRoutes([routes[1]]),
};
export default () => {
	const routesElement = useRoutes(routes);

	// 属于 UniversalLayout
	if (layoutToRoutes.UniversalLayout[location.pathname]) {
		return (
			// 登录
		<SecurityLayout>
			<UniversalLayout>
			<SuspenseLazy>{routesElement}</SuspenseLazy>
			</UniversalLayout>
		</SecurityLayout>
		);
	}

	// 属于 UserLayout
	if (layoutToRoutes.UserLayout[location.pathname]) {
		return (
		<UserLayout>
			<SuspenseLazy>{routesElement}</SuspenseLazy>
		</UserLayout>
		);
	}

	// 默认 BlankLayout
	return (
		<BlankLayout>
		<SuspenseLazy>{routesElement}</SuspenseLazy>
		</BlankLayout>
	);


	return (
		<UniversalLayout>
			<SuspenseLazy>
				{routesElement}
			</SuspenseLazy>
		</UniversalLayout>
		)
};
